logo
menu

트랜스파일러와 번들러 알아보기 2 | rollup, esbuild, swc, webpack, vite

2023. 12. 10.

  • #개발환경

이번 내용은 다양한 번들링에서 어떤 특징을 갖고 있는지 간단하게 공유하고자 한다! 세부적으로 사용할 때는 각각의 공식문서를 확인하는 것을 추천한다!
 

rollup

notion image
  • 💡 작은 코드 조각을 더 크고 복잡한 것으로 컴파일하기
      • 자바스크립트 모듈 번들러이다!
  • 여러 개의 파일로 이루어진 코드를 한 개 혹은 몇개로 묶어 주는 역할을 하는 번들러!
  • 번들링을 하면서 여러가지 일(compile, minify 등) 을 함께 수행하기 위해 여러가지 플러그인 제공
  • 보통 라이브러리 제작을 위한 번들러로 많이 사용됨
      • ⇒ 오픈 소스에서 많이 사용한다고 함
  • 번들링시 config 설정을 통해 commonjs 와 esm 방식으로 번들링 할 수 있음
      • // rollup.config.js

module.exports = {
  input: "src/main.js",
  output: [
    {
      file: "dist/bundle.js",
      format: "cjs", // commonjs
    },
    {
      file: "dist/bundle.mjs",
      format: "es", // esm, module
    },
  ],
  plugins: [],
};
  • 바벨을 이용하여 번들링하면서 트랜스파일도 가능
      • // rollup.config.js

const commonjs = require("@rollup/plugin-commonjs");
const { babel } = require("@rollup/plugin-babel");

module.exports = {
  input: "src/main.js",
  output: [
    {
      file: "dist/bundle.js",
      format: "cjs", // commonjs
    },
    {
      file: "dist/bundle.mjs",
      format: "es", // esm, module
    },
  ],
  plugins: [commonjs(), babel({ babelHelpers: "bundled" })],
};
      // .babelrc.json

{
  "presets": ["@babel/preset-env"]
}
 

Terser

notion image
  • “터서” 라고 읽음
  • 자바스크립트 mangler 및 압축기 도구
    • mangler 는 망가뜨리는 사람, 고기를 써는 기계로 “코드를 실행이 가능한 수준으로만 망가뜨림”
  • Terser 는 자바스크립트 코드를 위한 업계 표준 minifier
  • 변수 이름을 작게 만들고, 공백과 주석을 제거하고 사용하지 않는 코드를 삭제함
  • 보통 터서를 직접 사용하는것보다 다른 많은 도구에서 사용
    • webpack, angular, parcel 등
# 직접 실행
pnpm add terser -D

pnpm exec terser main.js --compress --mangle --output dist/output.js --source-map
// rollup.config.js

const { babel } = require("@rollup/plugin-babel");
const commonjs = require("@rollup/plugin-commonjs");
const terser = require("@rollup/plugin-terser");

module.exports = {
  input: "src/main.js",
  output: [
    {
      file: "dist/bundle.js",
      format: "cjs", // commonjs
    },
    {
      file: "dist/bundle.mjs",
      format: "es", // esm, module
    },
  ],
  plugins: [commonjs(), babel({ babelHelpers: "bundled" }), terser()],
};
pnpm build
 

esbuild

notion image
  • 매우 빠른 Web 용 번들러
  • Figma CTO 가 개발
  • esbuild 번들러의 주요 목표는 빌드 도구 성능의 새로운 시대를 열고, 그 과정에서 사용하기 쉬운 최신 번들러를 만드는 것
  • GO 언어를 이용한 병렬 처리로 다른 번들러에 비해 월등한 속도를 자랑
  • 바벨과 같은 트랜스타일링, 롤업과 같은 번들링, Terser 와 같은 미니파이 등을 수행할 수 있음
      • 하지만, esbuild 로 모든 것을 다하기에는 아직까지는 어려운 부분 존재 (아직 v1 - 0.19.9 아님)
      ⇒ 그래서 주로 작은 라이브러리를 만드는 용도나, 다른 번들러에 로더로 참여해서 Babel 혹은 Terser 를 대신하는 용도로 쓰임 (바벨과 터서보다 속도가 빠름)
 
// build.js

require("esbuild").build({
  entryPoints: ["src/index.ts"],
  outfile: "dist/index.js",
  bundle: true, // bundle 이 true 이면, treeShaking 동작 (사용하지 않는 코드 제거)
  platform: "node",
  minify: true,
});
// tsconfig.json
{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "declaration": true /* Generate .d.ts files from TypeScript and JavaScript files in your project. d.ts 파일 생성하겠다 */,
    "emitDeclarationOnly": true /* Only output d.ts files and not JavaScript files. ts 를 js 로 만드는 작업은 하지 않고, 오직 d.ts 만 만드는 작업을 하겠다 */,
    "outDir": "./dist" ,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*"]
}
// package.json
{
  "name": "my-utils",
  "version": "1.0.0",
  "description": "",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "build": "tsc && node build.js",
    "dev": "ts-node src/main.ts",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "esbuild": "^0.19.5",
    "typescript": "^5.2.2",
		"package-a": "workspace:*"
  }
}
  • 하지만 esbuild 는 타입체킹을 해주지 않기 때문에 build 할 때 tsc && 로 타입체킹을 먼저 해줘야함
    • main 설정을 통해 빌드시 나오는 경로를 등록하고
    • build 된 타입을 명시하기 위해 types 속성에 명시함
 

SWC

notion image
  • Web 을 위한 러스트 기반 플랫폼
  • 차세대 고속 개발자 도구를 위한 확장 가능한 Rust 기반 플랫폼
  • Speedy Web Compiler 의 약자로 빠른 속도가 장점
  • 컴파일과 번들링 모두 포함하고 있음, 하지만 요즘은 컴파일에 주로 사용되고 있음
      • 번들링은 아직 개발중이고, Terser 의 역할도 함 ⇒ SWC 가 플랫폼 용어를 쓰는 이유 (다 지원하겠다)
      ⇒ 속도로 무기로 Babel 과 Terser 대신 사용함
      하지만, 아직 안정적이지 않아 (100% 기존 역할을 대체하지는 못함) 주로 개발 환경에서 사용됨
  • 컴파일의 경우 최신 자바스크립트 기능을 사용해 자바스크립트/타입스크립트 파일을 가져와 모든 주요 브라우저에서 지원되는 유효한 코드를 출력
 
pnpm add @swc/cli @swc/core -D

pnpm exec swc src/index.js
// index.js
export const test = () => {
  const hello = "world";
  const world = "unused";

  console.log(hello, "test");
};
// .swcrc
{
  "$schema": "http://json.schemastore.org/swcrc",
  "env": {
    "targets": "last 100 Chrome versions"
  },
  "minify": true
}
## 최신 100개의 브라우저 및 minify => 화살표 함수 없어지고 minify(공백및 코드 축수) 수행
➜ pnpm exec swc src/arrow.js
# Successfully compiled 1 file with swc.
# export var test=function(){var hello="world";var world="unused";console.log(hello,"test")};
// swc-example/.swcrc
{
  "$schema": "http://json.schemastore.org/swcrc",
  "env": {
    "targets": "last 100 Chrome versions"
  },
  "minify": true,
  "jsc": {
    "minify": {
      "compress": true,
      "mangle": true
    }
  }
}
## 다양한 기능도 지원
➜ pnpm exec swc src/arrow.js
# Successfully compiled 1 file with swc.
# export var test=function(){console.log("world","test")};
 

Webpack

 
자세한 내용은 여기를 참고